import ui from './VMessageUI'

const BORDER_CLASS_NAME = 'v-message-main-border'

export default {
  // name: 'v-message',

  data() {
    return {
      // 存放所有通知信息，但是只显示最后一条
      notices: [],
      // timer
      timer: null,
      // borderStyle
      borderStyle: '',
      borderTimer: null
    }
  },

  computed: {
    count() {
      return this.notices.length
    },
    notice() {
      return this.count ? this.notices[this.count - 1] : undefined
    },
    content() {
      return this.notice && this.notice.message
    },
    type() {
      return this.notice && this.notice.type
    },
    duration() {
      return this.notice && this.notice.duration
    },
    showClose() {
      return this.notice && this.notice.showClose
    }
  },

  methods: {
    add(notice) {
      // 设置 border class
      this.borderStyle = BORDER_CLASS_NAME
      this.notices.push(notice)
      // 设置定时器，清空notices
      this.clearNotices()
      // 移除 class
      this.clearBorder()
    },

    clearNotices() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.notices = []
      }, this.duration)
    },

    clearBorder() {
      if (this.borderTimer) {
        clearTimeout(this.borderTimer)
      }
      this.borderTimer = setTimeout(() => {
        this.borderStyle = ''
      }, 1000)
    },

    close() {
      this.clearBorder()
      this.notices = []
      if (this.timer) {
        clearTimeout(this.timer)
      }
    }
  },

  render: ui
}
